<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="16">
          <a-col :md="5" :sm="24">
            <a-form-item label="股票代码">
              <a-input v-model="queryParam.id" placeholder=""/>
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="24">
            <a-form-item label="股票名称">
              <a-input v-model="queryParam.name" placeholder=""/>
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="24">
            <a-form-item label="申购代码">
              <a-input v-model="queryParam.code" placeholder=""/>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="24">
            <a-form-item label="模块">
              <a-select v-model="queryParam.module" placeholder="请选择">
                <a-select-option value="kcbsg">科创板</a-select-option>
                <a-select-option value="hszb">沪深主板</a-select-option>
                <a-select-option value="zxb">中小板</a-select-option>
                <a-select-option value="cyb">创业板</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="24">
            <a-form-item label="是否展示">
              <a-select v-model="queryParam.show" placeholder="请选择">
                <a-select-option value="true">展示</a-select-option>
                <a-select-option value="false">不展示</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="table-operator">
      <a-row>
        <a-col :md="{span: 8}" :sm="24">
          <span class="table-page-search-submitButtons">
            <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
            <a-button style="margin-left: 8px" @click="reset()">重置</a-button>
          </span>
        </a-col>
        <a-col :md="{span: 2, offset: 14}" :sm="24">
          <a-button type="primary" icon="plus" @click="$refs.stockModal.add()">新建</a-button>
        </a-col>
      </a-row>
    </div>
    <s-table
      ref="table"
      size="small"
      rowKey="id"
      :columns="columns"
      :data="loadData"
      :scroll="{ x: 1300 }"
      showPagination="auto"
    >
      <span slot="show" slot-scope="text,recode">
        <a-tag :color="recode.show | showClassFilter">{{ recode.show | showFilter }}</a-tag>
      </span>
      <span slot="action" slot-scope="text,record">
        <template>
          <a @click="$refs.stockModal.edit(record)"><a-icon type="edit"/>修改</a>
          <a-divider type="vertical"/>
          <a-popconfirm
            title="是否确定删除"
            okText="是"
            cancelText="否"
            @confirm="deleteConfirm(record)"
          ><a><a-icon type="delete"/>删除</a></a-popconfirm>
        </template>
      </span>
    </s-table>
    <stock-modal ref="stockModal" @updateTable="refreshTable"/>
  </a-card>
</template>

<script>
  import { stockPage, deleteStock } from '@/api/stock'
  import { STable } from '@/components'
  import StockModal from './modules/StockModal'
  import { errorHandler, successHandler } from '@/utils/request'

  export default {
    name: 'Stock',
    components: {
      STable, StockModal
    },
    data () {
      return {
        // 高级搜索 展开/关闭
        advanced: false,
        // 查询参数
        queryParam: {},
        columns: [
          { title: '股票代码', dataIndex: 'id', fixed: 'left', width: '80px' },
          { title: '股票名称', dataIndex: 'name', fixed: 'left', width: '80px' },
          { title: '申购编号', dataIndex: 'code' },
          { title: '发行总数(万股)', dataIndex: 'totalNum' },
          { title: '申购上限(万股)', dataIndex: 'topNum' },
          { title: '发行价格', dataIndex: 'discountPrice' },
          { title: '发行市盈率', dataIndex: 'fxPercent' },
          { title: '行业市盈率', dataIndex: 'hyPercent' },
          { title: '最后申购日期', dataIndex: 'date' },
          { title: '中签率%', dataIndex: 'zqPercent' },
          { title: '中签后缴款日期', dataIndex: 'lastDate' },
          { title: '上市日期', dataIndex: 'ssDate' },
          { title: '涨停数量', dataIndex: 'count' },
          { title: '排序', dataIndex: 'sort', sorter: true },
          { title: '是否展示', dataIndex: 'show ', fixed: 'right', scopedSlots: { customRender: 'show' } },
          { title: '操作', dataIndex: 'action', fixed: 'right', scopedSlots: { customRender: 'action' } }
        ],
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          console.log('loadData.parameter', parameter)
          return stockPage(Object.assign(parameter, this.queryParam)).then(res => {
            const result = {}
            result.data = res.data.rows
            result.pageNo = parameter.pageNo
            result.pageSize = parameter.pageSize
            result.totalCount = res.data.total
            result.totalPage = Math.ceil(res.data.total / parameter.pageSize)
            return result
          }).catch(err => {
            console.log(err)
          })
        }
      }
    },
    filters: {
      showFilter (show) {
        if (show && show === true) {
          return '展示'
        }
        return '不展示'
      },
      showClassFilter (show) {
        if (show && show === true) {
          return 'green'
        }
        return 'pink'
      }
    },
    methods: {
      refreshTable () {
        console.log('refresh table')
        this.$refs.table.refresh()
      },
      reset () {
        this.queryParam = {}
        this.refreshTable()
      },
      deleteConfirm (record) {
        console.log('record', record)
        deleteStock(record).then(res => {
          console.log(res)
          successHandler(res)
          this.refreshTable()
        }).catch(err => {
          errorHandler(err)
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .table-operator {
    margin-bottom: 18px;

    button {
      margin-right: 8px;
    }
  }
</style>
